<%--
  Created by IntelliJ IDEA.
  User: 黄智宏
  Date: 2024/6/17
  Time: 9:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户登录</title>
    <style>
        body {
            margin:0;
            overflow: hidden
            /*  font-family: Arial, sans-serif;*/
            /*  margin: 0;*/
            /*  padding: 0;*/
            /*  background-image: url('background.jpg');*/
            /*  background-size: cover;*/
            /*  background-position: center;*/
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .login-box {
            background-color: rgba(255, 255, 255, 0.2); /* 透明度为0.7的白色背景 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
        }

        .login-box h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .login-box input[type="text"],
        .login-box input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 15px;
            box-sizing: border-box;
        }

        .login-box input[type="submit"] {
            width: 100%;
            background-color: #6BC1EB;
            color: #fff;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .login-box input[type="submit"]:hover {
            background-color: #45a049;
        }
        .video{
            position: fixed;   /*视频定位方式设为固定*/
            top: 0;
            left: 0;
            bottom: 0;     /* 视频位置*/
            min-width: 100%;
            min-height: 100%;  /*不会因视频尺寸造成页面需要滚动*/
            width: 100%;
            height: 100%; /*尺寸保持原视频大小*/
            z-index: -10; /*z轴定位，小于0即可*/
            object-fit: cover;
            -webkit-filter: grayscale(20%);/*添加灰度蒙版，如果设定为100%则视频显示为黑白*/
        }

    </style>
</head>
<body>
<video src="../video/user_login.mp4" class="video" loop="loop" autoplay="autoplay" muted></video>
<audio autoplay="autoplay" id="audio" loop="loop">
    <source src="../video/user_login.MP3" type="audio/MP3">
</audio>
<img id="play" class="music_img" src="music.jpg" onclick="playPause()" alt="">
<div class="container">
    <div class="login-box">
        <h2>管理员登录</h2>
        <form action="../admin/login" method="post">
            <input type="text" name="admin_name" placeholder="Admin name" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Login">
        </form>
        <p>还没有账号？<a href="../user/register.jsp">立即注册</a></p>
        <button><a href="../user/login.jsp">用户登录</a></button>
    </div>
</div>
</body>
<script>
    var audio = document.getElementById("audio");
    var playBtn = document.getElementById("play");
    function playPause() {
        if (audio.paused) {
            audio.play();
            playBtn.style.animation = "muscis 5s linear infinite"; // 播放时保持原图不变
        } else {
            audio.pause();
            playBtn.style.animation = "none"; // 停止旋转
        }
    }

</script>
</html>
